<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Compound Object Interpolator</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
</head>

<body>

<div id="compound" class="clear">
    <span>Compound Interpolation<br></span>
</div>

<script type="text/javascript">
    var max = 21, data = [];

    var compoundScale = d3.scale.pow()
            .exponent(2)
            .domain([0, max])
            .range([
                {color:"#add8e6", height:"15px"}, // <-A
                {color:"#4169e1", height:"150px"} // <-B
            ]);

    for (var i = 0; i < max; ++i) data.push(i);

    function render(data, scale, selector) { // <-C
        d3.select(selector).selectAll("div.v-bar")
                .data(data)
                .enter().append("div").classed("v-bar", true)
                .append("span");

        d3.select(selector).selectAll("div.v-bar")
                .data(data)
                .exit().remove();

        d3.select(selector).selectAll("div.v-bar")
                .data(data)
                .classed("v-bar", true)
                .style("height", function(d){ // <-D
                    return scale(d).height;
                }) 
                .style("background-color", function(d){ // <-E
                    return scale(d).color;
                })
                .select("span")
                .text(function(d,i){return i;});
    }

    render(data, compoundScale, "#compound");
</script>

</body>

</html>